import { PageContainer } from "@ant-design/pro-layout"
import './css/style.css';
import { Form, Input, Button } from 'antd';
import ProCard from '@ant-design/pro-card';
import ProList from '@ant-design/pro-list';
import { useState } from 'react';
// import axios from "axios";

const data = [
    '语雀的天空',
    'Ant Design',
    '蚂蚁金服体验科技',
    'TechUI',
    'TechUI 2.0',
    'Bigfish',
    'Umi',
    'Ant Design Pro', 'Bigfish',
    'Umi',
    'Ant Design Pro',
    'Bigfish',
    'Umi',
    'Ant Design Pro', 'Bigfish',
    'Umi',
    'Ant Design Pro'
].map((item) => ({

    content: (
        <div className="divs">
            <img src="	https://bwcreation.oss-cn-beijing.aliyuncs.com/2021-12-27/9D8A0ADBF4CE7F62E1C063B1F0AF7E68.jpg" alt="" />
            <p>虚数之树</p>
            <p>量子之海</p>
        </div>
    ),
}));

const File = () => {
    const [cardActionProps] = useState<'actions' | 'extra'>('extra');
    // useEffect(() => {
    //     axios.get("/api/api/file").then((res) => {
    //         console.log(res);
    //     })
    // });
    return (
        <div>
            <PageContainer></PageContainer>
            <br />


            <ProCard size="small">
                <ProCard>
                    <Form.Item
                        label="文件名称"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input placeholder="请输入文件名称" />
                    </Form.Item>
                </ProCard>
                <ProCard>
                    <Form.Item
                        label="文件类型"

                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input placeholder="请输入文件类型" />
                    </Form.Item>
                </ProCard>
                <ProCard colSpan={2} layout="center" >
                    <Button type="primary">搜索</Button>
                </ProCard>
                <ProCard colSpan={2} layout="center" >
                    <Button type="primary">重置</Button>
                </ProCard>
            </ProCard>
            <br />
            <ProList<any>
                pagination={{
                    defaultPageSize: 8,
                    showSizeChanger: false,
                }}
                showActions="hover"
                rowSelection={{}}
                grid={{ gutter: 1, column: 4 }}
                onItem={(record: any) => {
                    return {
                        onMouseEnter: () => {
                            console.log(record);
                        },
                        onClick: () => {
                            console.log(record);
                        },
                    };
                }}
                metas={{
                    title: {},
                    subTitle: {},
                    type: {},
                    avatar: {},
                    content: {},
                    actions: {
                        cardActionProps,
                    },
                }}

                dataSource={data}
            />

        </div>
    )

}
export default File